
<script>
import dmbForm from "@/components/DmbForm";
import dmbTable from "@/components/LTable/index.vue";
import {
  formBase,
  tableBase,
  cellStyle,
  headerCellStyle,
  tableFormStyle,
  formItemStyle,
} from "./config";
import { mapState } from "vuex";
import dayjs from "dayjs";
import store from "@/store";
const defaultForm = {
  startTime: "",
  endTime: "",
  orderNos: "",
  userId: "",
  userName: "",
  taoBaoPaymentOrderId: "",
  ownedStore: "",
  consumerType: "",
  expenseType: "",
};
import { customsClearanceCompany_ListAPI } from "@/api/data/customs-clearance-company.js";
import { rechargeAPI } from "@/api/payment/consumer_detail.js";
export default {
  name: "specialdel",
  computed: {
    ...mapState({
      company: (state) => state.custom_dict.company,
      shop: (state) => state.custom_dict.shop,
    }),
    formItemStyle() {
      return formItemStyle;
    },
    tableFormStyle() {
      return tableFormStyle;
    },
    cellStyle() {
      return cellStyle;
    },
    headerCellStyle() {
      return headerCellStyle;
    },
  },
  components: { dmbTable, dmbForm },
  data() {
    return {
      propsSearchForm: { ...defaultForm },
      rebase: formBase,
      requestConfig: {
        url: "/payment/consumerDetail/queryConsumptionDetail",
        method: "get",
        montage: true,
      },
      selectionArr: [], // 多选框内容
      selectionArr2: [], // 多选框内容
      tableSearchForm: { ...defaultForm },
      listUser: [],
      customsClearanceCompany_List: [],
      dialogFormVisible: false,
      form: {},
      rules: {
        userId: [{ required: true, message: "请输入会员id", trigger: "blur" }],
        transferNo: [
          { required: true, message: "请输入交易号", trigger: "blur" },
        ],
        transferNoType: [
          { required: true, message: "请选择交易类型", trigger: "blur" },
        ],
        rechargeMoney: [
          { required: true, message: "请输入充值金额", trigger: "blur" },
        ],
        currency: [{ required: true, message: "请选择币别", trigger: "blur" }],
      },
    };
  },
  mounted() {
    customsClearanceCompany_ListAPI()
      .then((res) => {
        console.log(
          "清关",
          res,
          this.rebase.find((el) => el.label === "清关公司")
        );
        this.rebase.find((el) => el.label === "清关公司").options = res.rows;
        this.customsClearanceCompany_List = res.rows;
      })
      .catch((err) => {});
  },
  methods: {
    tableBase() {
      return tableBase;
    },
    // 导出
    async downLoad() {
      console.log(1, this.selectionArr);
      if (this.selectionArr.length > 0) {
        const ids = this.selectionArr.map((v) => v.id);
        console.log("id", ids);
        this.download(
          "/payment/consumerDetail/export",
          { ids },
          `消费明细账_${dayjs().format("YYYY-MM-DD HH:mm:ss")}.xlsx`
        );
      } else {
        this.$message.error("请选择条数据导出");
      }
    },
    // 多选框内容
    selectionChange(data) {
      this.selectionArr = data;
    },
    recharge() {
      this.$refs.form.validate((isPass) => {
        if (isPass) {
          rechargeAPI(this.form).then((res) => {
            this.$message.success(res.msg);
            this.dialogFormVisible = false;
          });
        }
      });
    },
    clearForm() {
      this.form = {};
      this.$nextTick(() => this.$refs.form.clearValidate());
    },
  },
  watch: {
    propsSearchForm: {
      deep: true,
      handler: function (value) {
        this.tableSearchForm = { ...value };
        delete this.tableSearchForm.shelfTime;
        // 日期
        if (!value?.shelfTime?.length) {
          this.tableSearchForm.startDate = "";
          this.tableSearchForm.endDate = "";
        } else if (value?.shelfTime?.length) {
          this.tableSearchForm.startDate = dayjs(value.shelfTime[0]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.tableSearchForm.endDate = dayjs(value.shelfTime[1]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
        // 店铺
        if (value.ownedStore) {
          const obj = this.shop.find((item) => {
            return item.id == value.ownedStore;
          });
          this.tableSearchForm.ownedStore = obj ? obj.shopName : "";
        }
      },
    },
  },
};
</script>
<template>
  <div>
    <div class="overflow-auto">
      <dmb-form
        ref="form"
        :form-items="rebase"
        :model-value="propsSearchForm"
        :item-style="formItemStyle"
        @update="(row) => (propsSearchForm = row)"
      >
        <template v-slot:header="row" class="flex flex-row-reverse">
          <div class="mb-3 flex flex-row-reverse">
            <div>
              <el-button type="success" @click="$refs.table.getListData()"
                >查询</el-button
              >
              <el-button type="primary" @click="downLoad">导出</el-button>
              <el-button type="primary" @click="dialogFormVisible = true"
                >代客充值</el-button
              >
            </div>
          </div>
        </template>
      </dmb-form>
    </div>
    <dmb-table
      ref="table"
      :CustomDoubleClick="true"
      :prop-list="tableBase()"
      :show-index-column="true"
      select-column-type="CHECKBOX"
      :props-search-form="tableSearchForm"
      :req-request="requestConfig"
      select-key="id"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
      :initialize="false"
      :change-search-form="false"
      :show-footer="true"
      :form-item-style="tableFormStyle"
      @selectionChange="
        (row) => {
          selectionArr = row;
        }
      "
    >
      <!-- 是否执行（0=未执行，1=已执行） -->
      <template v-slot:isExecute="{ row }">
        <el-checkbox
          disabled
          :true-label="1"
          :false-label="0"
          v-model="row.isExecute"
        ></el-checkbox>
        <span class="text-[#13ce66]" v-if="row.isExecute">已执行</span>
        <span class="text-[red]" v-else>未执行</span>
      </template>
    </dmb-table>
    <el-dialog
      @close="clearForm"
      title="代客充值"
      width="30%"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form" label-width="160px" :rules="rules" ref="form">
        <el-row
          ><el-col :span="20">
            <el-form-item label="会员ID" prop="userId">
              <el-input
                v-model="form.userId"
                placeholder="请输入会员ID"
              ></el-input>
            </el-form-item> </el-col
        ></el-row>

        <el-row>
          <el-col :span="20">
            <el-form-item label="交易类型" prop="transferNoType">
              <el-select
                v-model="form.transferNoType"
                placeholder="请选择交易类型"
              >
                <el-option label="淘宝交易号" :value="0"></el-option>
                <el-option label="订单交易号" :value="1"></el-option>
              </el-select>
            </el-form-item> </el-col
        ></el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="交易号" prop="transferNo">
              <el-input
                v-model="form.transferNo"
                placeholder="请输入交易号"
              ></el-input>
            </el-form-item> </el-col
        ></el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="充值金额" prop="rechargeMoney">
              <el-input-number
                :precision="2"
                :min="1.0"
                v-model="form.rechargeMoney"
                controls-position="right"
              ></el-input-number>
            </el-form-item> </el-col
        ></el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="币别" prop="currency">
              <el-select placeholder="请选择币别" v-model="form.currency">
                <el-option
                  v-for="item in 3"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item> </el-col
        ></el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                placeholder="请输入备注"
                v-model="form.remark"
              ></el-input>
            </el-form-item> </el-col
        ></el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="recharge">给指定客户充值</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #1890ff !important;
  border-color: #dcdfe6;
  cursor: default !important;
}
</style>
 